import { CSSProperties, FC, ReactNode, useEffect, useState } from 'react';
import styles from './style.less';
import Scrollbars from 'react-custom-scrollbars';
import classnames from 'classnames';
import Image from '@/components/Image';
import noadataIcon from '@/assets/list_nodata.png';
import { Input } from 'antd';

interface Column {
  dataIndex: string;
  title: ReactNode | string;
  width?: number;
  render?: Function;
  align?: 'left' | 'right' | 'center';
}
enum headerBgType {
  'left',
  'right',
}

interface Iprops {
  columns: Column[];
  dataSource: any[];
  width: number;
  height: number;
  hideHead?: boolean;
  rowStyle?: CSSProperties;
  sortNumber?: boolean;
  sortStyle?: CSSProperties;
  sortText?: string;
  headerType?: 'left' | 'right';
  headerTextColor?: string | string[];
  headerStyle?: CSSProperties;
  hover?: boolean;
  selected?: Function;
  selectedIndex?: number;
  rowBackground?: Boolean;
  odd?: boolean;
}

/**
 * simple-list
 * @param props 参数
 * @param props.columns 列
 * @param props.dataSource 数据源
 * @param {Number} props.width  表格宽度
 * @param {Number} props.height  表格高度, 实际展示位height - 50
 * @param {Boolean} props.hideHead  是否隐藏thead
 * @param {CSSProperties} props.rowStyle  行样式
 * @param {Boolean} props.sortNumber  是否显示序号
 * @param {CSSProperties} props.sortStyle  序号样式
 * @param {String} props.sortText   序号表头内容
 * @param {Boolean} props.autoScroll  是否自动滚动
 * @param {Boolean} props.rowBackground 是否显示行背景
 * @param {Function} props.select 选中当前行回调函数
 * @param {Number} props.selectedIndex 当前选中行索引
 * @param {boolean} props.hover 是否开启hover
 */
const SimpleList: FC<Iprops> = (props) => {
  const {
    columns,
    dataSource,
    width,
    height,
    hideHead,
    rowStyle,
    sortNumber,
    sortStyle,
    sortText,
    headerType = 'left',
    headerTextColor,
    headerStyle,
    hover,
    selected,
    selectedIndex,
    rowBackground,
    odd,
  } = props;
  const [currentHeaderHeight, setCurrentHeaderHeight] = useState<number>(50);
  useEffect(() => {
    const h = headerStyle?.height;
    if (h) {
      if (typeof h === 'number') {
        setCurrentHeaderHeight(h);
      } else if (typeof h === 'string') {
        const num = parseInt(h.split('px')[0].split('%')[0]);
        setCurrentHeaderHeight(num);
      }
    }
  }, [headerStyle]);
  return (
    <div className={styles.container} style={{ width, height }}>
      {hideHead ? (
        ''
      ) : (
        <div
          className={classnames(
            styles.th,
            headerBgType[headerType] === 1 ? styles.th_right : null,
          )}
          style={{ ...headerStyle }}
        >
          {sortNumber ? (
            <div
              className={styles.item}
              style={sortStyle ? sortStyle : { width: '65px' }}
            >
              {sortText ? sortText : ''}
            </div>
          ) : (
            ''
          )}
          {columns &&
            columns.map((item, index) => (
              <div
                className={styles.item}
                key={item.dataIndex}
                style={{
                  width: item.width,
                  textAlign: item.align || 'center',
                  color: Array.isArray(headerTextColor)
                    ? headerTextColor[index]
                    : headerTextColor,
                }}
              >
                {item.title}
              </div>
            ))}
        </div>
      )}

      <Scrollbars
        style={{ height: hideHead ? height : height - currentHeaderHeight }}
        renderThumbVertical={renderThumb}
        autoHide
      >
        {dataSource && dataSource.length > 0 ? (
          dataSource.map((item, index) => {
            return (
              <div
                key={index}
                style={rowStyle}
                className={classnames(
                  styles.tr,
                  hideHead ? null : styles.hidehead,
                  hover ? styles.hashover : null,
                  selected ? styles.canClick : null,
                  selectedIndex === index ? styles.tr_selected : null,
                  rowBackground ? styles.hadbackground : null,
                  odd ? styles.isodd : null,
                )}
                onClick={() => {
                  selected && selected(item, index);
                }}
              >
                {sortNumber ? (
                  <div
                    className={styles.item}
                    key={`${index}`}
                    style={sortStyle ? sortStyle : { width: '45px' }}
                  >
                    {index + 1}
                  </div>
                ) : (
                  ''
                )}
                {columns &&
                  columns.map((data) => (
                    <div
                      className={styles.item}
                      key={`${item.key}-${data.dataIndex}`}
                      style={{
                        width: data.width,
                        textAlign: data.align || 'center',
                      }}
                    >
                      {data.render
                        ? data.render(item, index)
                        : item[data.dataIndex]}
                    </div>
                  ))}
              </div>
            );
          })
        ) : (
          <div className={styles.nodata}>
            <Image src={noadataIcon} />
          </div>
        )}
      </Scrollbars>
    </div>
  );
};

export default SimpleList;

const renderThumb: FC<{ style: any }> = ({ style, ...props }) => {
  const thumbStyle = {
    width: '3px',
    backgroundColor: '#7DE0FF',
    opacity: '0.3',
    borderRadius: '0px',
    right: '-1px',
  };
  return <div style={{ ...style, ...thumbStyle }} {...props} />;
};
